<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Textinput - jQuery Mobile Demos</title>
    <link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="../../js/jquery.js"></script>
    <script src="../../_assets/js/index.js"></script>
    <script src="../../js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a>
</h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>

<div class="jqm-search">
<ul class="jqm-list">
<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a
        href="widgets/accordions/">Accordion</a></li>

<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/"
                                                                                      data-ajax="false">AJAX
    Navigation</a></li>

<li data-section="Widgets"
    data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
        href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a
        href="widgets/buttons/" data-ajax="false">Buttons</a></li>

<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
        href="widgets/checkbox/">Checkboxes</a></li>

<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                data-ajax="false">Collapsibles</a></li>

<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
        href="widgets/controlgroups/">Controlgroup</a></li>

<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
        href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
        href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
    toolbar</a></li>

<li data-section="Widgets"
    data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a
        href="widgets/forms/">Form elements</a></li>

<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
        href="widgets/grids/">Grids</a></li>

<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header
    toolbar</a></li>

<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a></li>

<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a>
</li>

<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
        href="widgets/listviews/" data-ajax="false">Listviews</a></li>

<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                  data-ajax="false">Loader overlay</a>
</li>

<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
        href="widgets/navbar/" data-ajax="false">Navbar</a></li>

<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
        href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a
        href="widgets/pages/">Pages</a></li>

<li data-section="Widgets"
    data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
        href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets"
    data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a
        href="widgets/popup/">Popup</a></li>

<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
        href="widgets/radiobuttons/">Radio buttons</a></li>

<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
        href="widgets/selects/">Select</a></li>

<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
        href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a
        href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span
        class="ui-li-count">New</span></a></li>

<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a
        href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
        href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets"
    data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a
        href="widgets/textinputs/">Text inputs & textarea</a></li>

<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop"
    data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

<li data-role="list-divider">Collapsibles</li>

<li data-section="Demo Showcase" data-filtertext="dynamic collapsible set accordion append expand"><a
        href="examples/collapsibles/dynamic-collapsible.html" data-ajax="false">Dynamic collapsible</a></li>

<li data-role="list-divider">Controlgroups</li>

<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a
        href="examples/controlgroups/dynamic-controlgroup.html" data-ajax="false">Dynamic controlgroup</a></li>

<li data-role="list-divider">Listviews</li>

<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a
        href="examples/listviews/grid-listview.html" data-ajax="false">Grid Listview</a></li>

<li data-section="Demo Showcase" data-filtertext="autodividers anchor jump scroll linkbars listviews lists ul"><a
        href="examples/listviews/autodividers-linkbar.html" data-ajax="false">Autodividers Linkbar</a></li>

<li data-section="Demo Showcase" data-filtertext="listviews autodividers selector autodividersselector lists ul ol"><a
        href="examples/listviews/autodividers-selector.html" data-ajax="false">Autodividers Selector</a></li>

<li data-role="list-divider">Navigation</li>

<li data-section="Demo Showcase" data-filtertext="backbone and require.js example navigation router"><a
        href="examples/backbone-require/index.html" data-ajax="false">Backbone and Require.js example</a></li>

<li data-section="Demo Showcase" data-filtertext="server redirection with server-side support php"><a
        href="examples/redirect/" data-ajax="false">Redirection with server-side support</a></li>

<li data-role="list-divider">Panels</li>

<li data-section="Demo Showcase"
    data-filtertext="panel styling slide panels sliding panels shadow rwd responsive breakpoint"><a
        href="examples/panels/panel-styling.html" data-ajax="false">Panel styling</a></li>

<li data-section="Demo Showcase" data-filtertext="open panel on swipe panels left right"><a
        href="examples/panels/panel-swipe-open.html" data-ajax="false">Open panel on swipe</a></li>

<li data-role="list-divider">Popups</li>

<li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a
        href="examples/popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>

<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.html"
                                                                           data-ajax="false">Popup with arrow</a></li>

<li data-role="list-divider">Responsive Tables</li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow stack custom styles"><a
        href="examples/tables/movie-list.html" data-ajax="false">Reflow: Custom styles</a></li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow heading groups rwd breakpoint"><a
        href="examples/tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Heading groups</a></li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow refresh method dynamically inject data"><a
        href="examples/tables/reflow-refresh.html" data-ajax="false">Reflow: Refresh method</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables column toggle hide rwd breakpoint customization options"><a
        href="examples/tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Customization options</a>
</li>

<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle heading groups rwd breakpoint"><a
        href="examples/tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Heading groups</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables column toggle refresh method dynamically inject data"><a
        href="examples/tables/columntoggle-refresh.html" data-ajax="false">Column toggle: Refresh method</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables table column toggle phone comparison rwd breakpoint"><a
        href="examples/tables/phone-compare.html" data-ajax="false">Column toggle demo: Phone comparison</a></li>

<li data-role="list-divider">Sliders</li>

<li data-section="Demo Showcase" data-filtertext="slider tooltip handle value extension input range sliders forms"><a
        href="examples/slider/tooltip.html" data-ajax="false">Tooltip extension</a></li>

<li data-role="list-divider">Swipe</li>

<li data-section="Demo Showcase" data-filtertext="swipe to navigate page transitions navigation"><a
        href="examples/swipe/swipe-page.html" data-ajax="false">Swipe to navigate</a></li>

<li data-section="Demo Showcase" data-filtertext="swipe to delete list item listviews lists ul ol"><a
        href="examples/swipe/swipe-list.html" data-ajax="false">Swipe to delete list item</a></li>

<li data-role="list-divider">Forms</li>

<li data-section="Questions & Answers" data-filtertext="CSS styles apply widget scope wrap selector customize"><a
        href="faq/question-template.html">Why won't my CSS styles apply correctly to a widget?</a></li>

<li data-section="Questions & Answers" data-filtertext="form update value enhance pageinit refresh"><a
        href="faq/updating-the-value-of-enhanced-form-elements-does-not-work.html">Updating the value of enhanced form
    elements does not work.</a></li>

<li data-section="Questions & Answers"
    data-filtertext="HTML 5 inputs appearance keyboard picker calendar date time slider file color"><a
        href="faq/my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs look different across devices and
    browsers.</a></li>

<li data-section="Questions & Answers" data-filtertext="range search inputs slider number text degrade"><a
        href="faq/my-range-search-input-type-is-being-changed.html">My range or search inputs are being change to
    number/text.</a></li>

<li data-section="Questions & Answers" data-filtertext="custom select popup dialog logic"><a
        href="faq/sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other
    times its a dialog.</a></li>

<li data-section="Questions & Answers" data-filtertext="disable button issue class method"><a
        href="faq/disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li>

<li data-section="Questions & Answers" data-filtertext="fixed toolbar header footer fullscreen select input bug issue">
    <a href="faq/controls-in-header-footer.html">Controls in my fixed header or footer are not responding or behave
        erratically.</a></li>

<li data-role="list-divider">Pages</li>

<li data-section="Questions & Answers"
    data-filtertext="head load scripts styles pageinit onload pagebeforecreate ajax nav pages"><a
        href="faq/scripts-and-styles-not-loading.html">Why aren't my scripts and styles loading?</a></li>

<li data-section="Questions & Answers" data-filtertext="document.ready onload paginit DOM ready on ready scripts "><a
        href="faq/dom-ready-not-working.html">Why isn't DOM ready working for my scripts?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav load page mobile.loadpage"><a
        href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav multi page document load"><a
        href="faq/why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document
    loaded?</a></li>

<li data-section="Questions & Answers" data-filtertext="pass url query params ajax nav"><a
        href="faq/pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a>
</li>

<li data-section="Questions & Answers" data-filtertext="hash pass parameters information ajax nav"><a
        href="faq/pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a>
</li>

<li data-section="Questions & Answers" data-filtertext="application cache status error isLocal ajax nav"><a
        href="faq/the-application-cache-is-not-working.html">I'm trying to use the application cache but it's not
    working.</a></li>

<li data-section="Questions & Answers"
    data-filtertext=">create refresh event trigger pageInit refresh method content injected page not enhanced."><a
        href="faq/injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li>

<li data-section="Questions & Answers" data-filtertext=">create trigger event pageInit injected HTML"><a
        href="faq/triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not
    work.</a></li>

<li data-section="Questions & Answers" data-filtertext="auto-enhance element stop preventnative role none"><a
        href="faq/how-can-i-stop-auto-enhancement-of-elements.html">How can I stop JQM from auto-enhancing an
    element?</a></li>

<li data-section="Questions & Answers"
    data-filtertext="auto-enhance block container parent stop preventnative role none"><a
        href="faq/how-can-i-stop-auto-enhancement-of-a-block-of-elements.html">How can I stop JQM from enhancing a block
    of elements?</a></li>

<li data-section="Questions & Answers" data-filtertext="page title ajax nav head"><a
        href="faq/how-do-i-control-page-titles.html">How do I control page titles?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a
        href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>

<li data-role="list-divider">Events</li>

<li data-section="Questions & Answers"
    data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a
        href="faq/how-do-i-use-touch-mouse-events.html">How do I use touch and mouse events?</a></li>

<li data-role="list-divider">Theme and styling</li>

<li data-section="Questions & Answers"
    data-filtertext="theme swatch css themeroller customize icons colors fonts style"><a
        href="faq/how-does-theming-work.html">How does theming work?</a></li>

<li data-role="list-divider">Apps</li>

<li data-section="Questions & Answers" data-filtertext="How do I need to configure PhoneGap Cordova?"><a
        href="faq/how-configure-phonegap-cordova.html">How do I need to configure PhoneGap/Cordova?</a></li>
<!--
<li data-role="list-divider">Navigation</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/nav-is-acting-erraticly.html">The nav is acting erratically!</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/deep-links-dont-work.html">Following a deep link ( a link to scroll to and id ) does not work.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/scripts-css-only-works-on-first-page-or-refresh.html">My script / css only works on first page or on refresh.</a></li>
<li data-role="list-divider">Widgets</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-double-enhanced.html">Cloning a widget or enhanced for element and enhancing causes "double" enhancement</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-does-not-update.html">Cloned widget or enhanced element does not update</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/data-enhance-false-does-not-work.html">Setting data-enhance="false" does not work.</a></li>

<li data-role="list-divider">General</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/selecting-element-by-id-not-working.html">Selecting elements by id only works sometimes or on first page!</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/global-config-settings-ignored.html">The global configuration settings i set are being ignored.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/custom-css-is-ignored.html">My custom css is ignored.</a></li>

<li data-role="list-divider">Events</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/swipe-triggered-when-scrolling.html">Swipe triggered when scrolling.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/document-ready-not-working.html">Document ready ignored after first page.</a></li>

<li data-role="list-divider">Theming &amp; custom styles</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add custom icons?</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add remove the circle behind the icons?</a></li>
-->

</ul>
</div>

</div>
<!-- /header -->

<div data-role="content" class="jqm-content">

<h1>Text inputs <a href="http://api.jquerymobile.com/textinput/" data-ajax="false" data-role="button" data-inline="true"
                   data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>

<p class="jqm-intro">Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to
    make them more attractive and useable on a mobile device.
</p>

<h2>Text</h2>

<div data-demo-html="true">
    <form>
        <label for="text-1">Text input:</label>
        <input type="text" name="text-1" id="text-1" value="">

        <label for="text-3">Text input: data-clear-btn="true"</label>
        <input type="text" data-clear-btn="true" name="text-3" id="text-3" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Search</h2>

<div data-demo-html="true">
    <form>
        <label for="search-1">Search:</label>
        <input type="search" name="search-1" id="search-1" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Textarea</h2>

<div data-demo-html="true">
    <form>
        <label for="textarea-1">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea-1" id="textarea-1"></textarea>
    </form>
</div>
<!-- /demo-html -->

<h2>Number</h3>

<div data-demo-html="true">
    <form>
        <label for="number-1">Number: data-clear-btn="false"</label>
        <input type="number" data-clear-btn="false" name="number-1" id="number-1" value="">

        <label for="number-2">Number: data-clear-btn="true"</label>
        <input type="number" data-clear-btn="true" name="number-2" id="number-2" value="">

        <label for="number-3">Number + pattern: data-clear-btn="false"</label>
        <input type="number" data-clear-btn="false" name="number-3" pattern="[0-9]*" id="number-3" value="">

        <label for="number-2">Number + pattern: data-clear-btn="true"</label>
        <input type="number" data-clear-btn="true" name="number-4" pattern="[0-9]*" id="number-4" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Date</h3>

<div data-demo-html="true">
    <form>
        <label for="date-1">Date: data-clear-btn="false"</label>
        <input type="date" data-clear-btn="false" name="date-1" id="date-1" value="">

        <label for="date-2">Date: data-clear-btn="true"</label>
        <input type="date" data-clear-btn="true" name="date-2" id="date-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Month</h3>

<div data-demo-html="true">
    <form>
        <label for="month-1">Month: data-clear-btn="false"</label>
        <input type="month" data-clear-btn="false" name="month-1" id="month-1" value="">

        <label for="month-2">Month: data-clear-btn="true"</label>
        <input type="month" data-clear-btn="true" name="month-2" id="month-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Week</h3>

<div data-demo-html="true">
    <form>
        <label for="week-1">Week: data-clear-btn="false"</label>
        <input type="week" data-clear-btn="false" name="week-1" id="week-1" value="">

        <label for="week-2">Week: data-clear-btn="true"</label>
        <input type="week" data-clear-btn="true" name="week-2" id="week-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Time</h3>

<div data-demo-html="true">
    <form>
        <label for="time-1">Time: data-clear-btn="false"</label>
        <input type="time" data-clear-btn="false" name="time-1" id="time-1" value="">

        <label for="time-2">Time: data-clear-btn="true"</label>
        <input type="time" data-clear-btn="true" name="time-2" id="time-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Datetime</h3>

<div data-demo-html="true">
    <form>
        <label for="datetime-1">Datetime: data-clear-btn="false"</label>
        <input type="datetime" data-clear-btn="false" name="datetime-1" id="datetime-1" value="">

        <label for="datetime-2">Datetime: data-clear-btn="true"</label>
        <input type="datetime" data-clear-btn="true" name="datetime-2" id="datetime-2" value="">

        <label for="datetime-3">Datetime-local: data-clear-btn="false"</label>
        <input type="datetime-local" data-clear-btn="false" name="datetime-3" id="datetime-3" value="">

        <label for="datetime-4">Datetime-local: data-clear-btn="true"</label>
        <input type="datetime-local" data-clear-btn="true" name="datetime-4" id="datetime-4" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Telephone</h3>

<div data-demo-html="true">
    <form>
        <label for="tel-1">Tel: data-clear-btn="false"</label>
        <input type="tel" data-clear-btn="false" name="tel-1" id="tel-1" value="">

        <label for="tel-2">Tel: data-clear-btn="true"</label>
        <input type="tel" data-clear-btn="true" name="tel-2" id="tel-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Email</h3>

<div data-demo-html="true">
    <form>
        <label for="email-1">Email: data-clear-btn="false"</label>
        <input type="email" data-clear-btn="false" name="email-1" id="email-1" value="">

        <label for="email-2">Email: data-clear-btn="true"</label>
        <input type="email" data-clear-btn="true" name="email-2" id="email-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>URL</h3>

<div data-demo-html="true">
    <form>
        <label for="url-1">Url: data-clear-btn="false"</label>
        <input type="url" data-clear-btn="false" name="url-1" id="url-1" value="">

        <label for="url-2">Url: data-clear-btn="true"</label>
        <input type="url" data-clear-btn="true" name="url-2" id="url-2" value="">
    </form>
</div>
<!-- /demo-html -->

<h2>Password</h3>

<div data-demo-html="true">
    <form>
        <label for="password-1">Password: data-clear-btn="false"</label>
        <input type="password" data-clear-btn="false" name="password-1" id="password-1" value="" autocomplete="off">

        <label for="password-2">Password: data-clear-btn="true"</label>
        <input type="password" data-clear-btn="true" name="password-2" id="password-2" value="" autocomplete="off">
    </form>
</div>
<!-- /demo-html -->

<h2>Color</h3>

    <div data-demo-html="true">
        <form>
            <label for="color-1">Color: data-clear-btn="false"</label>
            <input type="color" data-clear-btn="false" name="color-1" id="color-1" value="">
        </form>
    </div>
    <!-- /demo-html -->

    <div data-demo-html="true">
        <form>
            <form>
                <label for="color-2">Color: data-clear-btn="true"</label>
                <input type="color" data-clear-btn="true" name="color-2" id="color-2" value="">
            </form>
    </div>
    <!-- /demo-html -->

    <h2>File</h3>

        <div data-demo-html="true">
            <form>
                <label for="file-1">File: data-clear-btn="false"</label>
                <input type="file" data-clear-btn="false" name="file-1" id="file-1" value="">

                <label for="file-2">File: data-clear-btn="true"</label>
                <input type="file" data-clear-btn="true" name="file-2" id="file-2" value="">
            </form>
        </div>
        <!-- /demo-html -->

        <h2>Mini</h3>

            <div data-demo-html="true">
                <form>
                    <label for="text-4">Text input:</label>
                    <input type="text" data-mini="true" name="text-4" id="text-4" value="">

                    <label for="text-5">Text input: data-clear-btn="true"</label>
                    <input type="text" data-clear-btn="true" data-mini="true" name="text-5" id="text-5" value="">

                    <label for="search-4">Search:</label>
                    <input type="search" data-mini="true" name="search-4" id="search-4" value="">

                    <label for="textarea-4">Textarea:</label>
                    <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4"></textarea>
                </form>
            </div>
            <!-- /demo-html -->

            <h2>Placeholder</h3>

                <div data-demo-html="true">
                    <form>
                        <label for="text-6">Text input:</label>
                        <input type="text" name="text-6" id="text-6" value="" placeholder="Placeholder">

                        <label for="text-7">Text input: data-clear-btn="true"</label>
                        <input type="text" data-clear-btn="true" name="text-7" id="text-7" value=""
                               placeholder="Placeholder">

                        <label for="search-5">Search:</label>
                        <input type="search" name="search-5" id="search-5" value="" placeholder="Placeholder">

                        <label for="textarea-6">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea-6" id="textarea-6"
                                  placeholder="Placeholder"></textarea>
                    </form>
                </div>
                <!-- /demo-html -->

                <h2>Value/Text</h3>

                    <div data-demo-html="true">
                        <form>
                            <label for="text-18">Text input:</label>
                            <input type="text" name="text-18" id="text-18" value="Value">

                            <label for="text-19">Text input: data-clear-btn="true"</label>
                            <input type="text" data-clear-btn="true" name="text-19" id="text-19" value="Value">

                            <label for="search-11">Search:</label>
                            <input type="search" name="search-11" id="search-11" value="Value">

                            <label for="textarea-18">Textarea:</label>
                            <textarea cols="40" rows="8" name="textarea-18" id="textarea-18">Text</textarea>
                        </form>
                    </div>
                    <!-- /demo-html -->

                    <h2>Label hidden</h3>

                        <div data-demo-html="true">
                            <form>
                                <label for="text-8" class="ui-hidden-accessible">Text input:</label>
                                <input type="text" name="text-8" id="text-8" value="">

                                <label for="text-9" class="ui-hidden-accessible">Text input:
                                    data-clear-btn="true"</label>
                                <input type="text" data-clear-btn="true" name="text-9" id="text-9" value="">

                                <label for="search-6" class="ui-hidden-accessible">Search:</label>
                                <input type="search" name="search-6" id="search-6" value="">

                                <label for="textarea-8" class="ui-hidden-accessible">Textarea:</label>
                                <textarea cols="40" rows="8" name="textarea-8" id="textarea-8"></textarea>
                            </form>
                        </div>
                        <!-- /demo-html -->

                        <h2>Disabled</h3>

                            <div data-demo-html="true">
                                <form>
                                    <label for="text-10">Text input:</label>
                                    <input type="text" disabled="disabled" name="text-10" id="text-10" value="">

                                    <label for="text-11">Text input: data-clear-btn="true"</label>
                                    <input type="text" data-clear-btn="true" disabled="disabled" name="text-11"
                                           id="text-11" value="">

                                    <label for="search-7">Search:</label>
                                    <input type="search" disabled="disabled" name="search-7" id="search-7" value="">

                                    <label for="textarea-10">Textarea:</label>
                                    <textarea disabled="disabled" cols="40" rows="8" name="textarea-10"
                                              id="textarea-10"></textarea>
                                </form>
                            </div>
                            <!-- /demo-html -->

                            <h2>Fieldcontain</h3>

                                <div data-demo-html="true">
                                    <form>
                                        <div data-role="fieldcontain">
                                            <label for="text-12">Text input:</label>
                                            <input type="text" name="text-12" id="text-12" value="">
                                        </div>

                                        <div data-role="fieldcontain">
                                            <label for="text-13">Text input: data-clear-btn="true"</label>
                                            <input type="text" data-clear-btn="true" name="text-13" id="text-13"
                                                   value="">
                                        </div>

                                        <div data-role="fieldcontain">
                                            <label for="search-8">Search:</label>
                                            <input type="search" name="search-8" id="search-8" value="">
                                        </div>

                                        <div data-role="fieldcontain">
                                            <label for="textarea-12">Textarea:</label>
                                            <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
                                        </div>
                                    </form>
                                </div>
                                <!-- /demo-html -->

                                <h2>Fieldcontain, mini sized</h3>

                                    <div data-demo-html="true">
                                        <form>
                                            <div data-role="fieldcontain">
                                                <label for="text-14">Text input:</label>
                                                <input type="text" data-mini="true" name="text-14" id="text-14"
                                                       value="">
                                            </div>

                                            <div data-role="fieldcontain">
                                                <label for="text-15">Text input: data-clear-btn="true"</label>
                                                <input type="text" data-clear-btn="true" data-mini="true" name="text-15"
                                                       id="text-15" value="">
                                            </div>

                                            <div data-role="fieldcontain">
                                                <label for="search-9">Search:</label>
                                                <input type="search" data-mini="true" name="search-9" id="search-9"
                                                       value="">
                                            </div>

                                            <div data-role="fieldcontain">
                                                <label for="textarea-14">Textarea:</label>
                                                <textarea data-mini="true" cols="40" rows="8" name="textarea-14"
                                                          id="textarea-14"></textarea>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /demo-html -->

                                    <h2>Fieldcontain, hidden label</h3>

                                        <div data-demo-html="true">
                                            <form>
                                                <div data-role="fieldcontain" class="ui-hide-label">
                                                    <label for="text-16">Text input:</label>
                                                    <input type="text" name="text-16" id="text-16" value="">
                                                </div>

                                                <div data-role="fieldcontain" class="ui-hide-label">
                                                    <label for="text-17">Text input: data-clear-btn="true"</label>
                                                    <input type="text" data-clear-btn="true" name="text-17" id="text-17"
                                                           value="">
                                                </div>

                                                <div data-role="fieldcontain" class="ui-hide-label">
                                                    <label for="search-10">Search:</label>
                                                    <input type="search" name="search-110" id="search-10" value="">
                                                </div>

                                                <div data-role="fieldcontain" class="ui-hide-label">
                                                    <label for="textarea-16">Textarea:</label>
                                                    <textarea cols="40" rows="8" name="textarea-16"
                                                              id="textarea-16"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- /demo-html -->

</div>
<!-- /content -->

<div data-role="footer" class="jqm-footer">
    <p class="jqm-version"></p>

    <p>Copyright 2013 The jQuery Foundation</p>
</div>
<!-- /footer -->
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal"
     data-theme="c">
    <ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos"
        class="jqm-list">
        <li data-role="list-divider">jQuery Mobile Demos</li>
        <li><a href="./">Home</a></li>
        <li><a href="intro/">Introduction</a></li>
        <li><a href="examples/">Demo Showcase</a></li>
        <li><a href="faq/">Questions & Answers</a></li>
        <li><a href="intro/rwd.html">Going Responsive</a></li>
        <li data-role="list-divider">Widget reference</li>
        <li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini">
            <a href="widgets/accordions/">Accordion</a></li>

        <li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/"
                                                                                              data-ajax="false">AJAX
            Navigation</a></li>

        <li data-section="Widgets"
            data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
                href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

        <li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a
                href="widgets/buttons/" data-ajax="false">Buttons</a></li>

        <li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
                href="widgets/checkbox/">Checkboxes</a></li>

        <li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                        data-ajax="false">Collapsibles</a>
        </li>

        <li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
                href="widgets/controlgroups/">Controlgroup</a></li>

        <li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

        <li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
                href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

        <li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
                href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

        <li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
            toolbar</a></li>

        <li data-section="Widgets"
            data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements">
            <a href="widgets/forms/">Form elements</a></li>

        <li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
                href="widgets/grids/">Grids</a></li>

        <li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a
                href="widgets/headers/">Header toolbar</a></li>

        <li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a></li>

        <li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a
                href="widgets/links/">Links</a></li>

        <li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
                href="widgets/listviews/" data-ajax="false">Listviews</a></li>

        <li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                          data-ajax="false">Loader
            overlay</a></li>

        <li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
                href="widgets/navbar/" data-ajax="false">Navbar</a></li>

        <li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
                href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

        <li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a>
        </li>

        <li data-section="Widgets"
            data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
                href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets"
            data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition">
            <a href="widgets/popup/">Popup</a></li>

        <li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
                href="widgets/radiobuttons/">Radio buttons</a></li>

        <li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
                href="widgets/selects/">Select</a></li>

        <li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
                href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

        <li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a
                href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a>
        </li>

        <li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular">
            <a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
                href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets"
            data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms">
            <a href="widgets/textinputs/">Text inputs & textarea</a></li>

        <li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop"
            data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

    </ul>
</div>
<!-- /panel -->


</div>
<!-- /page -->
</body>
</html>
